<template>
  <div>
    <!-- <el-button size="mini" type="text" @click="gotoRouteHandle">返回</el-button> -->
    <div class="mod-detail" v-if="!isDataEdit">
      <!-- 头部 -->
    <div class="mod-isisis">
    <div class="hander-s">
      <div class="in-t">
      <div class="in-ts"></div>
      <h3 class="zhengshuxiangqing"><span>证书详情 - </span>  {{ getOpSign }}</h3>
      </div>
      <div class="anniu">
      <el-button type="text" style="color:#6E92E9;" @click="toggleEdit">修改</el-button>
      <i>|</i>
      <el-button type="text" style="color:#6E92E9;" @click="gotoRouteHandle">返回上级</el-button>
      </div>
    </div>
    <!-- 基础信息 -->
    <div class="form-div">
     <el-form :model="dataForm" :label-position="labelPosition" ref="dataForm" class="queryFormList">
       <el-row>
         <el-col :span="6">
         <el-form-item label="姓名：">
         {{dataForm.certificateInfo.name}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
          <el-form-item label="员工状态：">
         <span v-if="dataForm.certificateInfo.onCompanyFlag === 1">
           在职
         </span>
         <span v-if="dataForm.certificateInfo.onCompanyFlag === 0">
           离职
         </span>
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="身份证号：">
         {{dataForm.certificateInfo.idCard}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="手机号：">
         {{dataForm.certificateInfo.mobile}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="学历：">
              {{dataForm.certificateInfo.academic}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="证书类型：">
              <!-- dataForm.certificateInfo.pIdType -->
              <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_zc'">
              注册人员
             </span>
             <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_zcr'">
              职称人员
             </span>
              <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_sl'">
              三类人员
             </span>
             <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_xc'">
              现场岗位人员
             </span>
             <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_js'">
              技术人员
             </span>
             <span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_tz'">
              特种作业人员
             </span><span v-if="dataForm.certificateInfo.pIdType === 'conf_certificate_type_qt'">
              其他证书类型
             </span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="证书专业：">
              {{dataForm.certificateInfo.profession}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="证书是否注册：">
              <!-- {{dataForm.certificateInfo.registerType}} -->
              <span v-if="dataForm.certificateInfo.registerType === 1">
              是
             </span>
             <span v-if="dataForm.certificateInfo.registerType === 0">
              否
             </span>
             <span v-if="dataForm.certificateInfo.registerType === 2">
              非注册类证书
             </span>
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="6">
           <el-form-item label="证书编号：">
              {{dataForm.certificateInfo.certificateNo}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="发证日期：">
              {{dataForm.certificateInfo.releaseTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="到期日期：">
             <span v-if="dataForm.certificateInfo.validityEndTime !== ''">{{dataForm.certificateInfo.validityEndTime}}</span>
              <span v-if="dataForm.certificateInfo.longTerm == 1">长期有效</span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="证书状态：">
             <!-- {{dataForm.certificateInfo.status}} -->
             <span v-if="dataForm.certificateInfo.status === 2">
              挂还
             </span>
             <span v-if="dataForm.certificateInfo.status === 3">
              挂入
             </span>
             <span v-if="dataForm.certificateInfo.status === 1">
              挂出
             </span>
             <span v-if="dataForm.certificateInfo.status === 0">
              空闲
             </span>
             <span v-if="dataForm.certificateInfo.status === 21">
              投标
             </span>
             <span v-if="dataForm.certificateInfo.status === 22">
              项目
             </span>
             <span v-if="dataForm.certificateInfo.status === 23">
              中标
             </span>
             <span v-if="dataForm.certificateInfo.status === 24">
              其他
             </span>
            </el-form-item>
         </el-col>
          <el-col v-if="dataForm.certificateInfo.status === 22" :span="6">
           <el-form-item class="projecrClass" label="项目名称：">
             {{dataForm.certificateInfo.projectNames}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="保管人：">
              {{dataForm.certificateInfo.keepDeptName}} / {{dataForm.certificateInfo.keepUserName}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item label="挂靠日期：">
              {{dataForm.certificateInfo.borrowTime}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item label="结束日期：">
              {{dataForm.certificateInfo.borrowEndTime}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item label="来源企业：">
              {{dataForm.certificateInfo.borrowOrgName}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 1 || this.visId.certificateType === 3" :span="6">
           <el-form-item label="考试日期：">
              {{dataForm.certificateInfo.examTime}}
            </el-form-item>
         </el-col>
         <el-col  v-if="this.visId.certificateType === 1 || this.visId.certificateType === 3" :span="6">
           <el-form-item label="考试地点：">
              {{dataForm.certificateInfo.examLocation}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 1 || this.visId.certificateType === 3"  :span="6">
           <el-form-item label="考试分数：">
              {{dataForm.certificateInfo.examGrade}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="来源联系人：">
              {{dataForm.certificateInfo.borrowContact}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="联系方式：">
              {{dataForm.certificateInfo.borrowContactMobile}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 1 || this.visId.certificateType === 3"  :span="6">
           <el-form-item  label="考试总费用：">
              {{dataForm.certificateInfo.examFee}}(元)
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="通过猎头：">
              <!-- {{dataForm.certificateInfo.agencyFlag}} -->
              <span v-if="dataForm.certificateInfo.examAgencyFlag === 1">
              是
             </span>
             <span v-if="dataForm.certificateInfo.examAgencyFlag === 0">
              否
             </span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="猎头名称：">
              {{dataForm.certificateInfo.agencyName}}
            </el-form-item>
         </el-col>
         <el-col v-if="dataForm.certificateInfo.onCompanyFlag == 0" :span="6">
           <el-form-item label="离职时间：">
              {{dataForm.certificateInfo.companyEndTime}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 3" :span="6">
           <el-form-item  label="非在职员工姓名：">
              {{dataForm.certificateInfo.friendshipName}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item  label="人才费用：">
              {{dataForm.certificateInfo.affiliationExpend}}(元)
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item  label="猎头费用：">
              {{dataForm.certificateInfo.agencyFee}}(元)
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item label="引进总价：">
              {{dataForm.certificateInfo.totalFee}}(元)
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="是否已支付：">
              <!-- {{dataForm.certificateInfo.payFlag}} -->
              <span v-if="dataForm.certificateInfo.payFlag === 1">
              是
             </span>
             <span v-if="dataForm.certificateInfo.payFlag === 0">
              否
             </span>
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 2" :span="6">
           <el-form-item label="是否税后：">
              <!-- {{dataForm.certificateInfo.tax}} -->
              <span v-if="dataForm.certificateInfo.tax === 0">
              是
             </span>
             <span v-if="dataForm.certificateInfo.tax === 1">
              否
             </span>
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="支付日期：">
              {{dataForm.certificateInfo.payTime}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row v-if="this.visId.certificateType === 3">
         <el-col :span="6">
           <el-form-item label="非在职员工关系：">
              {{dataForm.certificateInfo.borrowContactRelationship}}
            </el-form-item>
         </el-col>
         <el-col v-if="this.visId.certificateType === 1 || this.visId.certificateType === 3"  :span="6">
           <el-form-item  label="非在职员工联系方式：">
              {{dataForm.certificateInfo.friendshipMobile}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row v-if="this.visId.certificateType === 2">
         <el-col :span="6">
           <el-form-item label="拿进人：">
              {{dataForm.certificateInfo.affiliationEmployeeName}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="费用说明：">
              {{dataForm.certificateInfo.feeRemark}}
            </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="情况说明：">
              {{dataForm.certificateInfo.remark}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="6">
           <el-form-item label="证书图片：">
            <ele-image :urls="dataForm.certiPicList"></ele-image>
            <!-- <ele-image :urls="dataForm.certifInfoList"></ele-image> -->
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="缴费凭证：">
              <!-- {{dataForm.certificateInfo.remark}} -->
            <ele-image :urls="dataForm.constratPicList"></ele-image>
            </el-form-item>
         </el-col>
         <!-- <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="合同图片：">
            <ele-image :urls="dataForm.constratPicList"></ele-image>
            </el-form-item>
         </el-col> -->
       </el-row>
     </el-form>
    </div>
    <div class="div-button">
    <el-button size="mini" class="button-jie button-see" type="primary" v-if="dataForm.certificateInfo.warrantFlag === 0" @click="clickTransactionVisible">借 出</el-button>
    <el-button size="mini" class="button-gui button-see" type="primary" v-if="dataForm.certificateInfo.status === 21 || dataForm.certificateInfo.status === 22 || dataForm.certificateInfo.status === 23 || dataForm.certificateInfo.status === 24" @click="clickDoTransactionBackB()">还 回</el-button>
    <el-button size="mini" class="button-shou button-see" type="primary" v-if="dataForm.certificateInfo.status === 1" @click="dialogFormVisibleA">收 回</el-button>
    <el-button size="mini" class="button-gua button-see" type="primary" v-if="dataForm.certificateInfo.status === 0 || dataForm.certificateInfo.status === 3" @click="clickguachu()">挂 出</el-button>
    <el-button size="mini" class="button-yanqi button-see" type="primary" v-if="dataForm.certificateInfo.status !==2" @click="itemDetails()">延 期</el-button>
    <el-button size="mini" class="button-guaru button-see" type="primary" v-if="dataForm.certificateInfo.onCompanyFlag === 0 && dataForm.certificateInfo.borrowedInFlag === false" @click="clickRackVisibleA">挂 入</el-button>
    <el-button size="mini" class="button-jie button-see" type="primary" v-if="this.visId.certificateType === 2 && dataForm.certificateInfo.status === 3" @click="clickGuiVisibleList()">挂 还</el-button>

    </div>
    <!-- 流转记录 -->
    <div class="table-s">
    <el-tabs class="tabs-s"
    v-model="activeName"
    @tab-click="handleClick"
    >
    <el-tab-pane  label="流转记录" name="first">
    <el-table
    :data="tableData"
    :header-cell-style="{background:'#F5F7FA'}"
    style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
    <el-table-column
      prop="type"
      label="状态"
      align="center"
      min-width="70">
      <template slot-scope="scope">
          <span v-if="scope.row.type === 11">
          <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>
             挂入
          </span>
          <span v-if="scope.row.type === 12">
             <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>
            挂还
          </span>
          <span v-else-if="scope.row.type === 21">
             <span class="font_family icon-tuoyuan1" style="color:#E96E6E;"></span>
            挂出
          </span>
          <span  v-else-if="scope.row.type === 22">
             <span class="font_family icon-tuoyuan1" style="color:#409EFF;"></span>
            收回
          </span>
          <span  v-else-if="scope.row.type === 3">
             <span class="font_family icon-tuoyuan1" style="color:#6E92E9;"></span>
            借出
          </span>
          <span v-else-if="scope.row.type === 30">
             <span class="font_family icon-tuoyuan1" style="color:color:#6EE976;"></span>
            还回
          </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="fromDeptName"
      label="来源单位/部门"
      align="center"
      :formatter="dateFormats"
      min-width="90">
    </el-table-column>
    <el-table-column
      prop="fromUserName"
      label="来源人"
      :formatter="dateFormats"
        align="center"
      min-width="70">
    </el-table-column>
    <el-table-column
      prop="toDeptName"
      label="接收单位/部门"
        align="center"
        :formatter="dateFormats"
      min-width="80">
    </el-table-column>
    <el-table-column
      prop="toUserName"
      label="接收人"
        align="center"
        :formatter="dateFormats"
      min-width="70">
    </el-table-column>
    <el-table-column
      prop="toUserMobile"
      label="联系电话"
        align="center"
        :formatter="dateFormats"
      min-width="100">
    </el-table-column>
    <el-table-column
      label="开始日期"
      align="center"
      min-width="100">
           <template slot-scope="scope">
          <span v-if="scope.row.type == 12 || scope.row.type == 22 || scope.row.type == 30">
            -
          </span>
          <span v-if="scope.row.type == 11 || scope.row.type == 21 || scope.row.type == 3">
            {{scope.row.transactionTime}}
          </span>
          <span v-if="scope.row.transactionTime == ''">
            -
          </span>
      </template>
    </el-table-column>
    <el-table-column
      label="到期日期"
      align="center"
      min-width="100">

     <template slot-scope="scope">
          <span v-if="scope.row.type == 12 || scope.row.type == 22 || scope.row.type == 30">
            {{scope.row.transactionTime}}
          </span>
          <span v-if="scope.row.type == 11 || scope.row.type == 21 || scope.row.type == 3">
            {{scope.row.transactionEndTime}}
          </span>
          <span v-if="scope.row.transactionEndTime == ''">
            -
          </span>
          <span v-if="scope.row.transactionTime == ''">
            -
          </span>
      </template>

    </el-table-column>

      <el-table-column
      prop="projectName"
      label="项目名称"
      :formatter="dateFormats"
        align="center"
      min-width="60">
    </el-table-column>
        <el-table-column
      prop="warrantFlag"
      label="是否押证"
      :formatter="dateFormats"
      align="center"
      min-width="60">
     <template slot-scope="scope">
          <span v-if="scope.row.warrantFlag == 1">
            是
          </span>
          <span v-else-if="scope.row.warrantFlag == 0">
            否
          </span>
          <span v-else>
            -
          </span>
     </template>

    </el-table-column>

    <el-table-column
      prop="detaineeFlag"
      label="是否押人"
      :formatter="dateFormats"
      align="center"
      min-width="60">
     <template slot-scope="scope">
          <span v-if="scope.row.detaineeFlag == 1">
            是
          </span>
          <span v-else-if="scope.row.detaineeFlag == 0">
            否
          </span>
          <span v-else>
            -
          </span>
     </template>

    </el-table-column>

    <el-table-column
      prop="remark"
      label="备注"
      :formatter="dateFormats"
        align="center"
      min-width="60">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      min-width="60">
      <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" v-if="SubmitId == scope.row.id" size="mini" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <!-- <el-button type="text" v-if="SubmitId !== scope.row.id" size="mini">-</el-button> -->
          <el-button type="text" style="color:#6E92E9;" v-if="scope.row.type === 3 && scope.row.statusTag === 0" size="mini" @click="clickGiveBack(scope.row)">还回</el-button>

          <el-button type="text" style="color:#6E92E9;" v-if="SubmitId !== scope.row.id" size="mini" @click="clickExamine(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      @size-change="sizeChangeHandleA"
      @current-change="currentChangeHandleA"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
   </el-pagination>
    </el-tab-pane>
    <!-- 延期 -->
    <el-tab-pane label="延期记录" name="second">
    <el-table
    :data="secondData"
    :header-cell-style="{background:'#F5F7FA'}"
    style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        :formatter="dateFormats"
        width="50">
      </el-table-column>
    <el-table-column
      prop="renewalTime"
      label="延期操作日期"
        align="center"
        :formatter="dateFormats"
      min-width="130">
    </el-table-column>
    <el-table-column
      prop="validityStartTime"
      min-width="130"
        align="center"
        :formatter="dateFormats"
      label="有效期开始日期">
    </el-table-column>
    <el-table-column
      prop="validityEndTime"
      min-width="130"
        align="center"
        :formatter="dateFormats"
      label="有效期结束日期">
    </el-table-column>
    <el-table-column
      prop="renewalFee"
      min-width="130"
        align="center"
        :formatter="dateFormats"
      label="延期费用">
    </el-table-column>
    <el-table-column
      min-width="170"
      prop="remark"
        align="center"
        :formatter="dateFormats"
      label="备注">
    </el-table-column>
    <el-table-column
      min-width="130"
        align="center"
      label="操作">
    <template slot-scope="scope">
      <el-button style="color:#6E92E9;" type="text" v-if="secondMitId == scope.row.id" size="mini" @click="addOrUpdateSecond(scope.row)">修改</el-button>
      <el-button type="text" style="color:#6E92E9;" v-if="secondMitId !== scope.row.id" @click="chakayanqi(scope.row)" size="mini">查看</el-button>
    </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
   </el-pagination>
    </el-tab-pane>
  </el-tabs>
    </div>
    <!-- 证书借出 -->
    <el-dialog
    title="证书借出"
    width="70%"
    :visible.sync="transactionVisible"
    >
      <el-form :model="form" :rules="dataRule" ref="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收部门" prop="toDeptId">
              <el-tree-select
                style="width:100%"
                :data="treeData"
                :disabled="jiechuA"
                v-model="form.toDeptId"
                node-key="id"
                placeholder="请选择接收部门"
                @change="keepDeptChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserId">
              <el-select v-model="form.toUserId" @change="changeSelect" :disabled="jiechuA"  placeholder="请选择接收人" style="width:100%">
                <el-option
                  v-for="item in employees"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <!-- prop="toUserMobile" -->
            <el-form-item label="联系电话">
              <el-input v-model="form.toUserMobile" :disabled="jiechuA" minlength="11" :readonly="this.readonly" placeholder="请填写联系电话" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借出时间" prop="transactionTime">
              <el-date-picker type="date" :disabled="jiechuA" :picker-options="pickerOptionstransactionEndTimeseA" v-model="form.transactionTime" placeholder="请选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="归还时间" prop="transactionTime">
              <el-date-picker type="date" :disabled="jiechuA" v-model="form.transactionEndTime" @blur="biurTransactionEndTime" placeholder="请选择归还时间" style="width:100%" :picker-options="pickerOptionstransactionEndTimese"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书用途">
              <el-select v-model="form.usage" :disabled="jiechuA" placeholder="请选择证书用途" @change="changeUsage" style="width:100%">
                <el-option
                  v-for="item in usages"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="id">
              <el-select v-model="form.id" :disabled="jiechuA" placeholder="请选择项目名称" @change="changeWarrantDetainListProJ" style="width:100%">
                <el-option
                  v-for="item in projectNameList"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col v-if="arrestVis" :span="12">
            <el-form-item label="是否押人">
              <el-select v-model="form.detaineeFlag" :disabled="jiechuA" placeholder="请选择是否押人" @change="changeWarrantDetainList" style="width:100%">
                <el-option
                  v-for="item in warrantDetainList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="warrantIdentification && cashVis" :span="12">
            <el-form-item label="是否押证">
              <el-select v-model="form.warrantFlag" :disabled="jiechuA" placeholder="请选择是否押证" @change="changeWarrantFlag" style="width:100%">
                <el-option
                  v-for="item in warrantFlagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :disabled="jiechuA" :rows="6" v-model="form.remark" placeholder="请填写备注"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="transactionVisible = false">取 消</el-button>
        <el-button class="button-see" size="mini" :disabled="jiechuA" type="primary" @click="transactionFormSubmit()">借 出</el-button>
      </div>
    </el-dialog>
    <!-- 证书挂出 -->
    <el-dialog
    title="证书挂出"
    width="70%"
    class="dialogForm"
    :visible.sync="borrowFormVisible"
    >
      <el-form :model="borrowForm" :rules="borrowFormRule" ref="borrowForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收单位" prop="toDeptName">
              <el-input :readonly="readonlyInput" :disabled="guachuA" v-model="borrowForm.toDeptName" placeholder="请填写接收单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserName">
              <el-input :readonly="readonlyInput" :disabled="guachuA" v-model="borrowForm.toUserName" placeholder="请填写接收人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="toUserMobile">
              <el-input :readonly="readonlyInput" :disabled="guachuA" v-model="borrowForm.toUserMobile" @input="changetoUserMobile(borrowForm.toUserMobile)" placeholder="请填写联系电话" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂出时间" prop="transactionTime">
              <el-date-picker type="date" :disabled="guachuA" :readonly="readonlyInput" v-model="borrowForm.transactionTime" :picker-options="pickerOptionstransactionEndTimeA" placeholder="请选择挂出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="挂出人">
              <el-select :disabled="readonlyInput" v-model="borrowForm.affiliationEmployee" placeholder="请选择挂出人" style="width:100%">
                <el-option
                  v-for="item in employees"
                  :key="item.id"
                  :disabled="guachuA"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="transactionTime">
              <el-date-picker type="date" :readonly="readonlyInput" :disabled="guachuA" @blur="blurtransactionEndTime" v-model="borrowForm.transactionEndTime" placeholder="请选择结束时间" style="width:100%" :picker-options="pickerOptionstransactionEndTime"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂出收入" prop="affiliationIncome">
              <el-input :readonly="readonlyInput" :disabled="guachuA" @input="changeaffiliationIncome(borrowForm.affiliationIncome)" placeholder="请填写挂出收入" v-model="borrowForm.affiliationIncome"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="猎头支出">
              <el-input :readonly="readonlyInput" :disabled="guachuA" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请填写猎头支出" v-model="borrowForm.agencyFee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他支出">
              <el-input :readonly="readonlyInput" :disabled="guachuA" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请填写其他支出" v-model="borrowForm.otherFee"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否打款">
              <el-select :disabled="readonlyInput" v-model="borrowForm.payFlag" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in optionsPayment"
                      :disabled="guachuA"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打款时间">
              <el-date-picker type="date" :readonly="readonlyInput" :disabled="guachuA" v-model="borrowForm.payTime" placeholder="请选择打款时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否税后">
              <el-select :disabled="readonlyInput" v-model="borrowForm.tax" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :disabled="guachuA"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
          <el-form-item class="form-s" label="上传打款凭证">
                  <el-upload
                  class="upload-s"
                  :disabled="guachuA"
                  ref="contractUpload"
                  accept =".jpg,.png"
                  :action="uploadUrl()"
                  :with-credentials="true"
                  :on-remove="onRemove"
                  :headers="myHeader"
                  :limit="limitNum"
                  :show-file-list="showList"
                  :on-success="onContractSuccess"
                  :on-error="onError"
                  list-type="picture-card">
                  <i class="el-icon-plus"></i>
                  <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png图片文件，且不超过800kb，其他无效</div> -->
                </el-upload>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item label="费用说明">
                <el-input :readonly="readonlyInput" :disabled="guachuA" type="textarea" :rows="4" v-model="borrowForm.feeRemark" placeholder="请填写中介、挂出等费用说明"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input :readonly="readonlyInput" :disabled="guachuA" type="textarea" :rows="4" v-model="borrowForm.remark" placeholder="请填写挂出的情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" @click="borrowFormVisible = false">取 消</el-button>
        <el-button class="button-see" v-if="!readonlyInput" :disabled="guachuA" size="mini" type="primary" plain @click="borrowFormSubmit()">挂 出</el-button>
      </div>
    </el-dialog>
    <!-- 还回 -->
    <el-dialog v-dialogDrag title="证书还回" width="60%" :visible.sync="clickDoTransactionBack">
      <el-form :model="backForm" ref="backDataForm" :rules="backRule" label-width="100px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称：" prop="projectName">
                <el-select v-model="backForm.projectName" :disabled="projectNamehuanhuiA" placeholder="请选择还回项目名称" style="width:100%">
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>
        </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" :disabled="huanhuiA" :rows="6" v-model="backForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="clickDoTransactionBack = false">取 消</el-button>
        <el-button class="button-see" :disabled="huanhuiA" size="mini" type="primary" @click="doTransactionBack()">还 回</el-button>
      </div>
    </el-dialog>
    <!-- 收回 -->
    <el-dialog v-dialogDrag title="证书收回" width="60%" :visible.sync="dialogFormVisible">
      <el-form :model="bringForm" ref="bringDataForm" :rules="bringRuleEnd" label-width="100px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="保管企业：" style="margin-bottom:0px;">
                {{dataForm.certificateInfo.keepDeptName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保管人：" style="margin-bottom:0px;">
                {{dataForm.certificateInfo.keepUserName}}
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col class="shouhuishijian" :span="12">
            <el-form-item label="收回时间：" prop="transactionEndTimeisis">
              <el-date-picker type="date" :disabled="shouhuiA" v-model="bringForm.transactionEndTimeisis" placeholder="选择收回时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" :rows="6" :disabled="shouhuiA" v-model="bringForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="button-see" size="mini" :disabled="shouhuiA" type="primary" @click="bringDataFormSubmit()">收 回</el-button>
      </div>
    </el-dialog>
    <!-- 延期 -->
    <el-dialog
    title="延期证书"
    :visible.sync="dialogPostPones"
    width="50%"
    >
   <span>
    <el-form :model="deeForm" ref="form" :rules="dataListRule" label-width="140px">
        <el-row>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期开始时间:" prop="validityStartTime">
              <el-date-picker type="date" :disabled="yanqiA" v-model="deeForm.validityStartTime" placeholder="选择新有效期开始时间" :picker-options="pickerOptionstransactionValidityEndTimeA" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期结束时间:" prop="validityEndTime">
              <el-date-picker type="date" :disabled="yanqiA" v-model="deeForm.validityEndTime" placeholder="选择新有效期结束时间" style="width:100%" @blur="biurVvalidityEndTime" :picker-options="pickerOptionstransactionValidityEndTime"></el-date-picker>
            </el-form-item>
          </el-col>
            <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期时间:" prop="renewalTime">
              <el-date-picker type="date" :disabled="yanqiA" v-model="deeForm.renewalTime" placeholder="选择延期时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期费用:" prop="renewalFee">
                <el-input v-model="deeForm.renewalFee" :disabled="yanqiA"  @input="changess(deeForm.renewalFee)" placeholder="请填写延期费用"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input type="textarea" :rows="5" :disabled="yanqiA" v-model="deeForm.remark" placeholder="请填写延期相关的情况说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
   </span>
   <span slot="footer" class="dialog-footer">
    <el-button size="mini" class="button-see" plain @click="dialogPostPones = false">取 消</el-button>
    <el-button size="mini" class="button-see" type="primary" :disabled="yanqiA" @click="clickPostPones()">确 定</el-button>
  </span>
   </el-dialog>
<!-- 挂入 -->
    <el-dialog
    title="证书挂入"
    width="70%"
    class="dialogForm"
    :visible.sync="clickRackVisible"
    >
      <el-form :model="rackForm" class="form-es" :rules="rackRule" ref="rackForm" label-width="80px">
                <el-row>
                <el-col :span="12">
                  <el-form-item label="来源单位" prop="fromDeptName">
                    <el-input v-model="rackForm.fromDeptName" :disabled="guaruA" placeholder="请填写来源单位"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="来源人" prop="fromUserName">
                    <el-input v-model="rackForm.fromUserName" :disabled="guaruA" :readonly="this.readonlyidid" maxlength="11" placeholder="请填写来源人"></el-input>
                  </el-form-item>
                </el-col>
           <el-col :span="12">
            <el-form-item class="fenghzuang" label="接收单位" prop="toDeptId">
              <el-tree-select
                style="width:100%"
                :data="treeData"
                :disabled="guaruA"
                v-model="rackForm.toDeptId"
                node-key="id"
                placeholder="请选择接收单位"
                @change="keepDeptChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserId">
              <el-select v-model="rackForm.toUserId" :disabled="guaruA" @change="changeSelect" placeholder="请选择接收人" style="width:100%">
                <el-option
                  v-for="item in employees"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="toUserMobile">
              <el-input v-model="rackForm.toUserMobile" minlength="11" :disabled="guaruA" :readonly="this.readonly" placeholder="请填写联系电话" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流转日期" prop="transactionTime">
              <el-date-picker type="date" v-model="rackForm.transactionTime" :disabled="guaruA" placeholder="选择流转日期" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂靠价格">
              <el-input oninput ="value=value.replace(/[^\d]/g,’’)" :disabled="guaruA" v-model="rackForm.affiliationExpend" placeholder="请填写挂靠价格"></el-input>
            </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="到期日期" prop="transactionEndTime">
              <el-date-picker type="date" v-model="rackForm.transactionEndTime" :disabled="guaruA" placeholder="请选择到期日期" style="width:100%" ></el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="12">
              <el-form-item label="是否中介">
                <el-select v-model="rackForm.agencyFlag" :disabled="guaruA" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in intermediary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="rackForm.agencyFlag == 1" :span="12">
              <el-form-item label="中介名称">
                <el-input v-model="rackForm.agencyName" :disabled="guaruA" placeholder="请填写中介名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="rackForm.agencyFlag == 1" :span="12">
                  <el-form-item label="中介费用">
                    <el-input oninput="value=value.replace(/[^\d.]/g,'')" :disabled="guaruA" v-model="rackForm.agencyFee" placeholder="请填写中介费用"></el-input>
                  </el-form-item>
            </el-col>
            <el-col :span="12">
                  <el-form-item label="其他费用">
                    <el-input oninput="value=value.replace(/[^\d.]/g,'')" :disabled="guaruA" v-model="rackForm.otherFee" placeholder="请填写其他费用"></el-input>
                  </el-form-item>
            </el-col>
            <el-col :span="12">
                  <el-form-item label="是否支付">
                   <el-select v-model="rackForm.payFlag" placeholder="请选择" :disabled="guaruA" style="width:100%">
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                </el-col>
            <el-col v-if="rackForm.payFlag == 1" :span="12">
            <el-form-item label="支付日期" prop="transactionTime">
              <el-date-picker type="date" v-model="rackForm.payTime" :disabled="guaruA" placeholder="请选择支付日期" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
                <el-col :span="12">
                  <el-form-item label="是否税后">
                    <el-select v-model="rackForm.tax" placeholder="请选择" :disabled="guaruA" style="width:100%">
                    <el-option
                      v-for="item in optionsAT"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                </el-col>
                </el-row>
              <el-row>
              <el-col :span="12">
              <el-form-item label="费用说明">
                <el-input type="textarea" :rows="6" v-model="rackForm.feeRemark" :disabled="guaruA" placeholder="请填写中介费、等费用说明"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="情况说明">
                <el-input type="textarea" :rows="6" v-model="rackForm.remark" :disabled="guaruA" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="clickRackVisible = false">取 消</el-button>
        <el-button class="button-see" size="mini" type="primary" :disabled="guaruA" plain @click="rackFormSubmit()">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 挂还 -->
    <el-dialog v-dialogDrag title="证书挂还" width="60%" :visible.sync="clickGuiVisible">
      <el-form :model="bringGuiForm" ref="bringGuiForm" :rules="bringGuiRule" label-width="100px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="接收单位：" style="margin-bottom:0px;">
                {{dataForm.certificateInfo.borrowOrgName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接收人：" style="margin-bottom:0px;">
                {{dataForm.certificateInfo.borrowContact}}
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="联系电话：">
                {{dataForm.certificateInfo.borrowContactMobile}}
              </el-form-item>
            </el-col>
          <el-col class="shouhuishijian" :span="12">
            <el-form-item label="归还日期：" prop="transactionTime">
              <el-date-picker type="date" :disabled="guiguihuiA" v-model="bringGuiForm.transactionTime" placeholder="请选择归还日期：" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" :rows="6" :disabled="guiguihuiA" v-model="bringGuiForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="clickGuiVisible = false">取 消</el-button>
        <el-button class="button-see" size="mini" :disabled="guiguihuiA" type="primary" @click="clickSubmit()">挂 还</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
  <!-- <div v-for="tableData"></div> -->
  <certificate-manual :editmodification="editmodification" @getAddUser="getAddUser" @initJobs="initJobs" @isDateEdit="isDateEdit" :img="img" :dataListForm="dataForm.certificateInfo" v-else></certificate-manual>
  </div>
</template>
<script>
import Vue from 'vue'
import CertificateManual from './certificate-manual'
import EleImage from './ele-image.vue'
import ElTreeSelect from "@/components/treeSelect/index.vue"
import merge from 'lodash/merge'
import { Button } from 'element-ui'
export default {
  name:'CertificateDetail',
  data () {
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号"));
    };
    return {
    isDataEdit: false,
    readonlyidid:false,
    dialogPostPones:false,
    readonlyInput:false,
    warrantIdentification:false,
    yanqiA:false,
    clickGuiVisible:false,
    clickRackVisible:false,
    backForm:{
    remark:'',
    projectName:''
    },
    projectList:[],
    deeForm:{
        renewalTime:'',
        validityStartTime:'',
        validityEndTime:'',
        remark:'',
        renewalFee:''
        },
    editableTabs: [],
    projectNameList:[],
    dataForm:{
      certificateInfo:{}
      // name:''
      // certificateType:1
    },
    form: {
      id:'',
      toDeptId: '',
      toUserId: '',
      toUserMobile: '',
      transactionTime: '',
      usage: '',
      remark: '',
      transactionEndTime:'',
      warrantFlag:1,
      detaineeFlag:0,
      projectName:''
    },
    bringGuiForm:{
    transactionTime:'',
    remark:''
    },
    bringGuiRule:{
    transactionTime: [
        { required: true, message: '请选择归还时间', trigger: 'blur' }
      ],
      remark: [
        { required: true, message: '请填写情况说明', trigger: 'blur' }
      ],
    },
    // 挂入数据
    rackForm:{
    fromDeptName:'',
    fromUserName:'',
    toDeptId:'',
    toUserId:'',
    toUserMobile:'',
    transactionTime:'',
    affiliationExpend:'',
    transactionEndTime:'',
    agencyFlag:0,
    agencyName:'',
    agencyFee:'',
    otherFee:'',
    payFlag:1,
    payTime:'',
    tax:1,
    feeRemark:'',
    remark:''
    },
    rackRule:{
    fromDeptName:[
            { required: true, message: '请填写来源单位', trigger:'blur' }
          ],
    fromUserName:[
            { required: true, message: '请填写来源人', trigger:'blur' }
          ],
    toDeptId:[
            { required: true, message: '请选择接收单位', trigger:'blur' }
          ],
    toUserId:[
            { required: true, message: '请选择接收人', trigger:'blur' }
          ],
    toUserMobile:[
            { required: true, message: '请填写联系电话', trigger:'blur' }
          ],
    transactionTime:[
            { required: true, message: '请选择流转日期', trigger:'blur' }
          ],
    transactionEndTime:[
            { required: true, message: '请选择到期日期', trigger:'blur' }
          ],
    },
    optionsAT:[{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        }],
    warrantFlagList:[{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        }],
    warrantDetainList:[{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        }],
    optionsPayment:[{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        }],
    intermediary:[
          {
          value: 1,
          label: '是'
          },
          {
          value: 0,
          label: '否'
          }
        ],
    optionsPayment:[{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        }],
    borrowForm: {
      tax:1,
      otherFee:'',
      payTime:'',
      payFlag:1,
      toUserMobile:'',
      agencyFee:'',
      affiliationEmployee:'',
      affiliationIncome:'',
      transactionEndTime:'',
      toDeptName: '',
      toUserName: '',
      toUserMobile: '',
      transactionTime: '',
      remark: '',
      feeRemark:''
      },
    bringForm: {
      transactionEndTimeisis: '',
      remark: ''
    },
    bringRuleEnd: {
          transactionEndTimeisis: [
            { required: true, message: '请选择收回时间', trigger:'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
    backRule: {
      remark: [
                { required: true, message: '请填写情况说明', trigger: 'blur' }
              ]
    },
    dataRule: {
          id: [
            { required: true, message: '请选择项目名称', trigger: 'blur' }
          ],
          toDeptId: [
            { required: true, message: '请选择接收单位', trigger: 'blur' }
          ],
          toUserId: [
            { required: true, message: '请选择接收人', trigger: 'blur' }
          ],
          toUserMobile: [
            { required: true, validator: checkMobile, message: '请填写联系电话', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ],
          transactionTime: [
            { required: true, message: '请选择借出时间', trigger: 'blur' }
          ]
        },
    dataListRule: {
      renewalTime: [
        { required: true, message: '选择延期时间', trigger: 'blur' }
      ],
      validityStartTime: [
        { required: true, message: '选择有效期开始时间', trigger: 'blur' }
      ],
      validityEndTime: [
        { required: true, message: '选择有效期结束时间', trigger: 'blur' }
      ],
      renewalFee: [
        { required: true, message: '请填写延期费用', trigger: 'blur' }
      ]
    },
    borrowFormRule: {
          toDeptName: [
            { required: true, message: '请填写接收单位', trigger: 'blur' }
          ],
          toUserName: [
            { required: true, message: '请填写接收人', trigger: 'blur' }
          ],
          toUserMobile: [
            { required: true, validator:checkMobile, message: '请填写联系电话', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ],
          affiliationIncome:[
            { required: true, message: '请填写挂出收入', trigger: 'blur' }
          ],
          transactionTime: [
            { required: true, message: '请选择挂出时间', trigger: 'blur' }
          ]
        },
    usages:[
      {value: 21, name:'投标'},
      {value: 23, name:'中标'},
      {value: 22, name:'项目'},
      {value: 24, name:'其他'},
    ],
    employees: [],
    editmodification:true,
    dialogFormVisible:false,
    clickDoTransactionBack:false,
    transactionVisible: false,
    borrowFormVisible: false,
    labelPosition:'right',
    activeName: 'first',
    pageIndex: 1,
    pageSize: 5,
    totalPage: 0,
    readonly:false,
    jiechu:false,
    huanhui:false,
    guachu:false,
    shouhui:false,
    yanqi:false,
    guaru:false,
    projectNamehuanhuiA:false,
    arrestVis:false,
    cashVis:false,
    huanhuiA:false,
    guiguihuiA:false,
    jiechuA:false,
    guachuA:false,
    shouhuiA:false,
    guaruA:false,

    guaruId:'',
    yanqiId:'',
    jiechuId:'',
    huanhuiId:'',
    guachuId:'',
    shouhuiId:'',
    tableData:[],
    treeData: [],
    secondData:[],
    img:[],
    name:'',
    SubmitId:'',
    secondMitId:'',
    limitNum: 1,
    guiguihui:false,
    guiguiId:'',
    showList: true,
    pickerOptionstransactionEndTime:{
      disabledDate: (time) => {
        return time.getTime() < this.borrowForm.transactionTime;
          }
    },
    pickerOptionstransactionEndTimeA:{},
    pickerOptionstransactionEndTimese:{
      disabledDate: (time) => {
        return time.getTime() < this.form.transactionTime;
          }
    },
    pickerOptionstransactionEndTimeseA:{},
    pickerOptionstransactionValidityEndTime:{
      disabledDate: (time) => {
        return time.getTime() < this.deeForm.validityStartTime;
          }
    },
    pickerOptionstransactionValidityEndTimeA:{}
    }
  },
  props:{
    visId:{
      type: Object,
      required: true
    },
    isEdited:{
    type:Boolean,
    },
    flag: {
      type: Boolean,
      default: false
    },
    types:{
    type:Number
    }
  },
  created () {
     this.initOrgTree()
     this.initJobs()
     this.initRecord()
     this.initOrgTree()
     this.renewalInfo()
     this.keepDeptChange()
     this.changeUsage()
    },
  computed:{
    getOpSign(){
      if(this.dataForm.certificateInfo.certificateType === 1){
       return  "在职员工证书"
      }else if(this.dataForm.certificateInfo.certificateType === 2){
      return  "挂靠证书"
      }else{
      return "非在职员工证书"
      }
      // this.dataForm.certificateType === 2? "兼职证书":"在职员工证书"
    },
    myHeader(){
      return {
        "token":Vue.cookie.get('token')
      }
    }
    },
    components: {
      ElTreeSelect, EleImage, CertificateManual
    },
  methods:{
    changeWarrantDetainListProJ(value){
    console.log(value)
    this.projectNameList.forEach(i =>{
      if(value === i.id){
        this.form.projectName = i.projectName
      }
    })
    },
    dialogFormVisibleA(){
    this.dialogFormVisible = true
    this.bringForm = {}
    this.shouhuiA = false
    },
    clickRackVisibleA(){
    this.guaruA = false
    this.clickRackVisible = true
    },
    biurVvalidityEndTime(){
      if(this.deeForm.validityEndTime !== ''){
      this.pickerOptionstransactionValidityEndTimeA = {
      disabledDate: (time) => {
        return time.getTime() > this.deeForm.validityEndTime;
          }
    }
      }
    },
    blurtransactionEndTime(){
      if(this.borrowForm.transactionEndTime !== ''){
    this.pickerOptionstransactionEndTimeA = {
      disabledDate: (time) => {
        return time.getTime() > this.borrowForm.transactionEndTime;
          }
    }
      }
    },
    changeWarrantDetainList(value){
    if(this.form.detaineeFlag == 1){
    this.warrantIdentification = false
    }else{
    this.warrantIdentification = true
    }
    },
    biurTransactionEndTime(){
      if(this.form.transactionEndTime !== ''){
      this.pickerOptionstransactionEndTimeseA = {
      disabledDate: (time) => {
        return time.getTime() > this.form.transactionEndTime;
      }
    }
      }
    },
    // 还回项目数据
    getProjects(){
    if(this.types == null){
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/out/projects/'+this.visId.id),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
             this.projectList = data.data
             /* this.backForm.projectName = this.projectList[0].id */
           }
        })
    }else{
      this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/out/projects/'+this.visId.certificateId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
             this.projectList = data.data
             /* this.backForm.projectName = this.projectList[0].id */
           }
        })
    }
    },
    clickGuiVisibleList(){
    this.clickGuiVisible = true
    this.guiguihuiA = false
    this.bringGuiForm = {}
    },
    changess(val) {
                val = val.replace(/(^\s*)|(\s*$)/g, "")
                if(!val) {
                    this.a = "";
                    return
                }
                var reg = /[^\d.]/g

                // 只能是数字和小数点，不能是其他输入
                val = val.replace(reg, "")

                // 保证第一位只能是数字，不能是点
                val = val.replace(/^\./g, "");
                // 小数只能出现1位
                val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                // 小数点后面保留2位
                val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                this.deeForm.renewalFee = val;
    },
    changeaffiliationIncome(val){
    val = val.replace(/(^\s*)|(\s*$)/g, "")
                if(!val) {
                    this.a = "";
                    return
                }
                var reg = /[^\d.]/g

                // 只能是数字和小数点，不能是其他输入
                val = val.replace(reg, "")

                // 保证第一位只能是数字，不能是点
                val = val.replace(/^\./g, "");
                // 小数只能出现1位
                val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                // 小数点后面保留2位
                val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                this.borrowForm.affiliationIncome = val;
    },
    changetoUserMobile(val){
    val = val.replace(/(^\s*)|(\s*$)/g, "")
                if(!val) {
                    this.a = "";
                    return
                }
                var reg = /[^\d.]/g

                // 只能是数字和小数点，不能是其他输入
                val = val.replace(reg, "")

                // 保证第一位只能是数字，不能是点
                val = val.replace(/^\./g, "");
                // 小数只能出现1位
                val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                // 小数点后面保留2位
                val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                this.borrowForm.toUserMobile = val;
    },
    dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
    // 修改流转
    addOrUpdateHandle(row){
    console.log(row);
    // 还回
    if(row.type == 30){
      this.huanhui = true
      this.huanhuiId = row.id
      this.backForm = {...this.backForm, ...row}
      this.clickDoTransactionBack = true
      this.backForm.remark = row.remark
    }
    if(row.type == 12){
      this.guiguihui = true
      this.guiguiId = row.id
      this.clickGuiVisible = true
      this.bringGuiForm = {...this.bringGuiForm,...row}
      this.bringGuiForm.remark = row.remark
    }
    // 借出
    if(row.type == 3){
    this.arrestVis = true
    this.cashVis = true
    this.transactionVisible = true
    this.changeWarrantDetainList()
    this.getProjects()
    this.jiechu = true
    this.jiechuId = row.id
    this.form = {...this.form, ...row}
    this.form.transactionTime = new Date(row.transactionTime)
    }
    // 挂出
    if(row.type == 21){
    this.borrowFormVisible = true
    this.guachu = true
    this.guachuId = row.id
    this.borrowForm = {...this.borrowForm, ...row}
    this.borrowForm.transactionTime = new Date(row.transactionTime)
    }
    // 收回
    if(row.type == 22){
    this.dialogFormVisible = true
    this.shouhui = true
    this.shouhuiId = row.id
    // this.bringForm = {...this.bringForm, ...row}
    this.bringForm.transactionEndTimeisis = row.transactionTime,
    this.bringForm.remark = row.remark
    }
    if(row.type == 11){
      this.clickRackVisible = true
      this.guaru = true
      this.guaruId = row.id
      this.rackForm = {...this.rackForm, ...row}
    }
    },
    clickguachu(){
    this.borrowFormVisible = true
    this.guachuA = false
    this.borrowForm = {
      tax:1,
      otherFee:'',
      payTime:'',
      payFlag:1,
      toUserMobile:'',
      agencyFee:'',
      affiliationEmployee:'',
      affiliationIncome:'',
      transactionEndTime:'',
      toDeptName: '',
      toUserName: '',
      toUserMobile: '',
      transactionTime: '',
      remark: '',
      feeRemark:''
    }
    this.readonlyInput = false
    },
    clickExamine(row){
      console.log(row);
        // 还回
    if(row.type == 30){
      this.huanhui = true
      this.huanhuiA = true
      this.projectNamehuanhuiA = true
      this.huanhuiId = row.id
      this.clickDoTransactionBack = true
      this.backForm.remark = row.remark
    }
    if(row.type == 12){
      this.guiguihuiA = true
      this.guiguihui = true
      this.guiguiId = row.id
      this.clickGuiVisible = true
      this.bringGuiForm.remark = row.remark
    }
    // 借出
    if(row.type == 3){
    this.transactionVisible = true
    this.jiechuA = true
    this.jiechu = true
    this.getProjects()
    this.jiechuId = row.id
    this.form = {...this.form, ...row}
    this.form.transactionTime = new Date(row.transactionTime)
    }
    // 挂出
    if(row.type == 21){
    this.borrowFormVisible = true
    this.guachuA = true
    this.guachu = true
    this.readonlyInput = true
    this.guachuId = row.id
    this.borrowForm = {...this.borrowForm, ...row}
    this.borrowForm.transactionTime = new Date(row.transactionTime)
    }
    // 收回
    if(row.type == 22){
    this.dialogFormVisible = true
    this.shouhuiA = true
    this.shouhui = true
    this.shouhuiId = row.id
    this.bringForm.transactionEndTimeisis = row.transactionTime,
    this.bringForm.remark = row.remark
    }
    if(row.type == 11){
      this.clickRackVisible = true
      this.guaruA = true
      this.guaru = true
      this.guaruId = row.id
      this.rackForm = {...this.rackForm, ...row}
    }
    },
    chakayanqi(){

    },
    changeSelect(value){
    this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/info/'+value),
          method: 'get',
        }).then(({data}) => {
      // this.dataListName = data.e
      this.rackForm.toUserMobile = data.e.mobile
      this.form.toUserMobile = data.e.mobile
      this.readonly = true
      })
    },
    addOrUpdateSecond(row){
    this.dialogPostPones = true
    this.deeForm = row
    this.yanqi = true
    this.yanqiId = row.id
    },
    chakayanqi(row){
    this.dialogPostPones = true
    this.deeForm = row
    this.yanqi = true
    this.yanqiA = true
    this.yanqiId = row.id
    },
    clickPostPones(){
      if(this.yanqi == false){
      this.$refs.form.validate(valid=>{
      if(valid){
      this.$http({
              url: this.$http.adornUrl('/certificate/certificateRenewalInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.dataForm.certificateInfo.id,
                'tenantId': this.dataForm.certificateInfo.tenantId,
                'renewalTime': this.$dateFormat(this.deeForm.renewalTime),
                'validityStartTime': this.$dateFormat(this.deeForm.validityStartTime),
                'validityEndTime': this.$dateFormat(this.deeForm.validityEndTime),
                'remark': this.deeForm.remark,
                'renewalFee': this.deeForm.renewalFee
                // 'contractPic': contractPics.join(",")
              })
            }).then(({data})=>{
              // console.log(data);
              if (data.code === 0) {
              this.$message.success("延期成功")
              this.dialogPostPones = false
              this.initJobs()
              this.renewalInfo()
              }else{
              this.$message.error("延期失败")
              }
            })
      }
      })
      }else{
      this.$refs.form.validate(valid=>{
      if(valid){
      this.$http({
              url: this.$http.adornUrl('/certificate/certificateRenewalInfo/update'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.dataForm.certificateInfo.id,
                'id': this.yanqiId,
                'renewalTime': this.$dateFormat(this.deeForm.renewalTime),
                'validityStartTime': this.$dateFormat(this.deeForm.validityStartTime),
                'validityEndTime': this.$dateFormat(this.deeForm.validityEndTime),
                'remark': this.deeForm.remark,
                'renewalFee': this.deeForm.renewalFee
                // 'contractPic': contractPics.join(",")
              })
            }).then(({data})=>{
              // console.log(data);
              if (data.code === 0) {
              this.$message.success("操作成功")
              this.dialogPostPones = false
              this.initJobs()
              this.renewalInfo()
              }else{
              this.$message.error("操作失败")
              }
            })
      }
      })
      }
      },
    itemDetails(){
      this.dialogPostPones = true
      this.deeForm = {}
      this.yanqiA = false
      this.yanqi = false
    },
    toggleEdit() {
        this.isDataEdit = true
    },
  gotoRouteHandle () {
    if(this.isEdited){
      // this.$router.go(-1)
     this.$parent.routerBack()
    //  this.$parent.handleClick();
    //  this.$parent.clickPackUp()
    }else{
     this.$parent.routerBack()
    //  this.$parent.handleClick();
    //  this.$parent.clickPackUp()

    }
  this.$emit('rountHandle',false)
  },
  handleClick(tab, event) {
    // if(this.SubmitId == this.tableData)
    this.name = tab.name
    if(this.name === 'first'){
    this.initRecord()
    }else{
     this.renewalInfo()
    }
  },
  getAddUser(){
  this.initOrgTree()
  this.initJobs()
  this.initRecord()
  this.initOrgTree()
  this.renewalInfo()
  },
  initOrgTree() {
    this.$http({
      url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
      method: 'get',
      params: {}
    }).then(({data}) => {
      if (data && data.code === 0) {
        this.treeData = [data.deptInfo]
      } else {
        this.treeData = []
      }
    })
  },
  isDateEdit(){
    // this.dataForm = []
    // console.log(111);
    //  this.initOrgTree()
     this.initJobs()
    //  this.initRecord()
    //  this.initOrgTree()
    //  this.renewalInfo()
    //  this.keepDeptChange()
    //  this.changeUsage()
    this.isDataEdit = false
  },
  clickTransactionVisible(){
    if(this.dataForm.certificateInfo.detaineeAble === 1){
      this.arrestVis = true
    }
    if(this.dataForm.certificateInfo.warrantAble === 1){
      this.cashVis = true
    }
  // console.log(1);
  this.jiechuA = false
  this.transactionVisible = true
  this.changeWarrantDetainList()
  this.getJiechu()
/*   this.form = {
      toDeptId: '',
      toUserId: '',
      toUserMobile: '',
      usage: '',
      remark: '',
      warrantFlag:1,
      detaineeFlag:0,
      projectName:''
  } */
  this.changeWarrantFlag()
  },
  getJiechu(){
  this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/transactionOut/projects'),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
             this.projectNameList = data.data
           }
        })
  },
  initJobs() {
    if(this.types == null){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/info/'+this.visId.id),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
            this.dataForm = data
            console.log(this.dataForm);
            this.rackForm.borrowContact = this.dataForm.certificateInfo.name
            this.readonlyidid = true
            this.img = []
            data.certiPicList.forEach(val => {
            this.img.push({
            // name: val.response.data.fileName,
            url: data.certiPicList[0].path
          })
        })
            // this.img = data.certiPicList[0].path
            // this.img.name = data.certiPicList[0].fileName
            // this.img.url = data.certiPicList[0].path
            // this.image = data.constratPicList[0]
            // console.log(data.image);
           }
            //  setTimeout(() => {
            //     this.activeName = data[0].randomNum
            // });

        })
    }else{
      this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/info/'+this.visId.certificateId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
            this.dataForm= data
            console.log(this.dataForm.certificateInfo);
            this.img = []
            data.payPicList.forEach(val => {
            this.img.push({
            url: data.payPicList[0].path
          })
        })
            // this.img = data.certiPicList[0].path
            // this.img.name = data.certiPicList[0].fileName
            // this.img.url = data.certiPicList[0].path
            // this.image = data.constratPicList[0]
            // console.log(data.image);
           }
            //  setTimeout(() => {
            //     this.activeName = data[0].randomNum
            // });

        })
    }
      },
      // 流转记录
  initRecord() {
    if(this.types ==null){
    this.$http({
      url: this.$http.adornUrl('/certificate/certiTransactionInfo/getAllList'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.id,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.tableData = data.data
        this.SubmitId = data.data[0].id
        this.totalPage = data.count
        console.log(this.tableData);
       }
    })
    }else{
   this.$http({
      url: this.$http.adornUrl('/certificate/certiTransactionInfo/getAllList'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.certificateId,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.tableData = data.data
        this.SubmitId = data.data[0].id
        this.totalPage = data.count
        console.log(this.tableData);
       }

    })
       }
  },
  renewalInfo() {
    if(this.types ==null){
    this.$http({
      url: this.$http.adornUrl('/certificate/certificateRenewalInfo/list/'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.id,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.secondData = data.page.list
        this.secondMitId = data.page.list[0].id
        this.totalPage = data.page.totalPage
       }
        //  setTimeout(() => {
        //     this.activeName = data[0].randomNum
        // });
    })
    }else{
      this.$http({
      url: this.$http.adornUrl('/certificate/certificateRenewalInfo/list/'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.certificateId,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.secondData = data.page.list
        this.secondMitId = data.page.list[0].id
        this.totalPage = data.page.totalPage
        // console.log(data);
       }
        //  setTimeout(() => {
        //     this.activeName = data[0].randomNum
        // });
    })
    }
  },
  // 挂入
  rackFormSubmit(){
  if(this.guaru == false){

      if(this.types == null){
        var certificateIdId = this.visId.id
        }else{
        var certificateIdId = this.visId.certificateId
        }
  this.$refs['rackForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                'certificateId': certificateIdId,
                'borrowOrgName':this.rackForm.borrowOrgName,
                'borrowContact':this.rackForm.borrowContact,
                'toDeptId':this.rackForm.toDeptId,
                'toUserId':this.rackForm.toUserId,
                'mobile':this.rackForm.mobile,
                'type': 11,
                'transactionTime':this.rackForm.transactionTime,
                'affiliationExpend':this.rackForm.affiliationExpend,
                'transactionEndTime':this.rackForm.transactionEndTime,
                'agencyFlag':this.rackForm.agencyFlag,
                'agencyName':this.rackForm.agencyName,
                'agencyFee':this.rackForm.agencyFee,
                'otherFee':this.rackForm.otherFee,
                'payFlag':this.rackForm.payFlag,
                'payTime':this.rackForm.payTime,
                'tax':this.rackForm.tax,
                'feeRemark':this.rackForm.feeRemark,
                'remark':this.rackForm.remark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.initRecord()
                    this.initJobs()
                    this.clickRackVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
  }else{
    this.$refs['rackForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
              method: 'post',
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                'certificateId': this.visId.id,
                'id':this.guaruId,
                'borrowOrgName':this.rackForm.borrowOrgName,
                'borrowContact':this.rackForm.borrowContact,
                'toDeptId':this.rackForm.toDeptId,
                'toUserId':this.rackForm.toUserId,
                'mobile':this.rackForm.mobile,
                'type': 11,
                'transactionTime':this.rackForm.transactionTime,
                'affiliationExpend':this.rackForm.affiliationExpend,
                'transactionEndTime':this.rackForm.transactionEndTime,
                'agencyFlag':this.rackForm.agencyFlag,
                'agencyName':this.rackForm.agencyName,
                'agencyFee':this.rackForm.agencyFee,
                'otherFee':this.rackForm.otherFee,
                'payFlag':this.rackForm.payFlag,
                'payTime':this.rackForm.payTime,
                'tax':this.rackForm.tax,
                'feeRemark':this.rackForm.feeRemark,
                'remark':this.rackForm.remark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.initRecord()
                    this.initJobs()
                    this.clickRackVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
  }
  },
  // 借出
  transactionFormSubmit(){
    if(this.jiechu == false){

        if(this.types == null){
        var certificateIdId = this.visId.id
        }else{
        var certificateIdId = this.visId.certificateId
        }
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/out'),
              method: 'post',
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                'certificateId': certificateIdId,
                'type': 3,
                'projectId':this.form.id,
                'toDeptId': this.form.toDeptId,
                'toUserId': this.form.toUserId,
                'toUserMobile': this.form.toUserMobile,
                'transactionTime': this.$dateFormat(this.form.transactionTime),
                'usage': this.form.usage,
                'remark': this.form.remark,
                'transactionEndTime':this.$dateFormat(this.form.transactionEndTime),
                'projectName':this.form.projectName,
                'warrantFlag':this.form.warrantFlag,
                'detaineeFlag':this.form.detaineeFlag
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.certificateInfo.status = data.c.status
                // this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.initRecord()
                    this.initJobs()
                    this.transactionVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
    }else{
      this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/out/update'),
              method: 'post',
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                'id': this.jiechuId,
                'type': 3,
                'toDeptId': this.form.toDeptId,
                'toUserId': this.form.toUserId,
                'toUserMobile': this.form.toUserMobile,
                'transactionTime': this.$dateFormat(this.form.transactionTime),
                'usage': this.form.usage,
                'remark': this.form.remark,
                'transactionEndTime':this.$dateFormat(this.form.transactionEndTime),
                'projectName':this.form.projectName,
                'warrantFlag':this.form.warrantFlag,
                'detaineeFlag':this.form.detaineeFlag
              })
            }).then(({data}) => {
              if (data.code === 0) {
                console.log(26987);
                this.dataForm.certificateInfo.status = data.c.status
                // this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.initRecord()
                    this.initJobs()
                    this.transactionVisible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
    }
      },
      // 挂出
    borrowFormSubmit(){
      if(this.guachu == false){

        if(this.types == null){
        var certificateIdId = this.visId.id
        }else{
        var certificateIdId = this.visId.certificateId
        }
      this.$refs['borrowForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
            method: 'post',
            data: this.$http.adornData({
              'certificateId': certificateIdId,
              'type': 21,
              'toDeptName': this.borrowForm.toDeptName,
              'affiliationEmployee':this.borrowForm.affiliationEmployee,
              'toUserName': this.borrowForm.toUserName,
              'toUserMobile': this.borrowForm.toUserMobile,
              'transactionTime': this.$dateFormat(this.borrowForm.transactionTime),
              'remark': this.borrowForm.remark,
              'payTime':this.borrowForm.payTime,
              'payFlag':this.borrowForm.payFlag,
              'agencyFee':this.borrowForm.agencyFee,
              'transactionEndTime':this.borrowForm.transactionEndTime,
              'affiliationIncome':this.borrowForm.affiliationIncome,
              'otherFee':this.borrowForm.otherFee,
              'tax':this.borrowForm.tax,
              'feeRemark':this.borrowForm.feeRemark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.status = data.c.status
              this.dataForm.certiTransactionInfoList = data.ctList
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initRecord()
                  this.initJobs()
                  this.borrowFormVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
      }else{

        console.log(this.guachuId);
      this.$refs['borrowForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
            method: 'post',
            data: this.$http.adornData({
              // 'certificateId': this.visId.id || undefined,
              'id':this.guachuId,
              'type': 21,
              'toDeptName': this.borrowForm.toDeptName,
              'toUserName': this.borrowForm.toUserName,
              'affiliationEmployee':this.borrowForm.affiliationEmployee,
              'toUserMobile': this.borrowForm.toUserMobile,
              'transactionTime': this.$dateFormat(this.borrowForm.transactionTime),
              'remark': this.borrowForm.remark,
              'payTime':this.borrowForm.payTime,
              'payFlag':this.borrowForm.payFlag,
              'agencyFee':this.borrowForm.agencyFee,
              'transactionEndTime':this.borrowForm.transactionEndTime,
              'affiliationIncome':this.borrowForm.affiliationIncome,
              'otherFee':this.borrowForm.otherFee,
              'tax':this.borrowForm.tax,
              'feeRemark':this.borrowForm.feeRemark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.status = data.c.status
              this.dataForm.certiTransactionInfoList = data.ctList
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initRecord()
                  this.initJobs()
                  this.borrowFormVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
      }
      },
  //  收回
     bringDataFormSubmit () {
      if(this.shouhui == false){


      this.$refs['bringDataForm'].validate((valid) => {
       if (valid) {
         this.$http({
           url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
           method: 'post',
           data: this.$http.adornData({
             'id': this.tableData[0].id,
             'certificateId': this.dataForm.certificateInfo.id,
             'type': 22,
             'transactionTime': this.$dateFormat(this.bringForm.transactionEndTimeisis),
             'remark': this.bringForm.remark,
           })
         }).then(({data}) => {
           if (data && data.code === 0) {
             this.$message({
               message: '操作成功',
               type: 'success',
               duration: 1500,
               onClose: () => {
                 this.initRecord()
                 this.initJobs()
                 this.dialogFormVisible = false
                //  this.init(this.ct.id)
               }
             })
           } else {
             this.$message.error(data.msg)
           }
         })
       }
     })
       }else{
       this.$refs['bringDataForm'].validate((valid) => {
       if (valid) {
         this.$http({
           url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
           method: 'post',
           data: this.$http.adornData({
             'id': this.shouhuiId,
             'certificateId': this.dataForm.certificateInfo.id,
             'type': 22,
             'transactionTime': this.$dateFormat(this.bringForm.transactionEndTimeisis),
             'remark': this.bringForm.remark,
           })
         }).then(({data}) => {
           if (data && data.code === 0) {
             this.$message({
               message: '操作成功',
               type: 'success',
               duration: 1500,
               onClose: () => {
                 this.initRecord()
                 this.initJobs()
                 this.dialogFormVisible = false
                //  this.init(this.ct.id)
               }
             })
           } else {
             this.$message.error(data.msg)
           }
         })
       }
     })
       }
   },
  //  挂还
  clickSubmit(){
      if(this.guiguihui == false){
        if(this.types == null){
        var certificateIdId = this.visId.id
        }else{
        var certificateIdId = this.visId.certificateId
        }
      this.$refs['bringGuiForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/certificate/certiTransactionInfo/save'),
            method: 'post',
            data: this.$http.adornData({
              'certificateId': certificateIdId || undefined,
              'type': 12,
              'toDeptName': this.dataForm.certificateInfo.borrowOrgName,
              'toUserName': this.dataForm.certificateInfo.borrowContact,
              'toUserMobile': this.dataForm.certificateInfo.borrowContactMobile,
              'transactionTime': this.$dateFormat(this.bringGuiForm.transactionTime),
              'remark': this.bringGuiForm.remark,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.status = data.c.status
              this.dataForm.certiTransactionInfoList = data.ctList
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initRecord()
                  this.initJobs()
                  this.clickGuiVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
      }else{
      this.$refs['bringGuiForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
            method: 'post',
            data: this.$http.adornData({
              // 'certificateId': this.visId.id || undefined,
              'id':this.guiguiId,
              'type': 12,
              'toDeptName': this.dataForm.certificateInfo.borrowOrgName,
              'toUserName': this.dataForm.certificateInfo.borrowContact,
              'toUserMobile': this.dataForm.certificateInfo.borrowContactMobile,
              'transactionTime': this.$dateFormat(this.bringGuiForm.transactionTime),
              'remark': this.bringGuiForm.remark,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.status = data.c.status
              this.dataForm.certiTransactionInfoList = data.ctList
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initRecord()
                  this.initJobs()
                  this.clickGuiVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
      }
      },
   changeUsage(value){
   this.form.usage = value
   },
   changeWarrantFlag(value){
   console.log(this.form.warrantFlag);

   if(this.form.warrantFlag){

   }

   },
  //  还回按钮
  clickDoTransactionBackB(){
  this.huanhuiA = false,
  this.backForm = {}
  this.getProjects()
  this.projectNamehuanhuiA = false
  this.clickDoTransactionBack = true
  },
  clickGiveBack(row){
  this.huanhuiA = false,
  this.getProjects()
  this.projectNamehuanhuiA = true
  this.backForm.projectName = row.id
  this.clickDoTransactionBack = true
  },
  // 还回jiekou
  doTransactionBack(){

        if(this.huanhui == false){
        this.$refs['backDataForm'].validate((valid) => {
        if (valid) {
        this.$http({
                url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/return'),
                method: 'post',
                data: this.$http.adornData({
                  'id': this.backForm.projectName,
                  'remark':this.backForm.remark
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                    this.clickDoTransactionBack = false
                    this.initRecord()
                    this.initJobs()
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
        }
     })
        }else{
        this.$refs['backDataForm'].validate((valid) => {
        if (valid) {
        this.$http({
                url: this.$http.adornUrl('/certificate/certiTransactionInfo/transaction/return/update'),
                method: 'post',
                data: this.$http.adornData({
                  'certificateId': this.visId.id,
                  'id': this.huanhuiId,
                  'type': 30,
                  'remark':this.backForm.remark
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                    this.clickDoTransactionBack = false
                    this.initRecord()
                    this.initJobs()
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
        }
     })
        }
      },
      uploadUrl(){
        return this.$http.adornUrl(`/certificate/certificateInfo/upload`)
      },
      onRemove(file, fileList){
      console.log(this.file)
      console.log(this.fileList);
      },
      onContractSuccess(response, file, fileList){
        this.constractPicList = fileList
      },
      onError(err, file, fileList){
        this.$message.error("上传失败")
      },
      keepDeptChange(id, item){
        this.employees = []
        // this.dataForm.keepUserId = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/getEmployeeInfos'),
          method: 'get',
          params: this.$http.adornParams({
                  'deptId': id
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.employees = data
            this.readonly = true
          }
        })
      },
  sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.renewalInfo()
    },
    sizeChangeHandleA(val){
    this.pageSize = val
    this.pageIndex = 1
    this.initRecord()
    },
  currentChangeHandle (val) {
      this.pageIndex = val
      this.renewalInfo()
    },
    currentChangeHandleA (val) {
      this.pageIndex = val
      this.initRecord()
    }
}
}
</script>
<style lang="scss" scoped>
.mod-detail{
  padding: 15px !important;
  background-color: #F5F7FA;
}
.mod-isisis{
  padding-right: 15px !important;
  padding-left: 15px !important;
  background-color: #ffffff;
}
.in-t{
  height: 56px;
  float: left;
  display: flex;
  align-items: center;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.form-es{
  .fenghzuang{
    margin-bottom: 18px !important;
  }
}

/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;

        }
      }
     }
    }
  }
}
/deep/
.el-dialog__header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.el-dialog__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px !important;
}
}
.font_family{
font-size: 15px !important;
}
.shouhuishijian{
  margin-top: 8px;
}
.queryFormList{
  .el-form-item {
    margin-bottom: 0px !important;
}
}
.button-see{
  font-size: 14px;
}
.div-button{
  width: 100%;
  height: 35px;
  // margin-bottom: 30px;
  // float: right;
  .button-jie{
    float: right;
    margin-left: 10px;
    // margin-right: 10px;
  }
  .button-shou{
    float: right;
    margin-left: 10px;
  }

  .button-gui{
    float: right;
    // margin-right: 10px;
    margin-left: 10px;
  }
  .button-gua{
    float: right;
    margin-left: 10px;
  }
  .button-yanqi{
    float: right;
    margin-left: 10px;
    // margin-right: 10px;
  }
  .button-guaru{
    float: right;
    // margin-right: 10px;
  }
}
  .hander-s{
    width: 100%;
    height: 56px;
    color: #303133;
    overflow: hidden;
    h3{
      float: left;
      font-size: 16px;
      margin: 0px !important;
      padding: 0px !important;
    }
    padding-left: 10px;
    font-size: 14px;
    font-weight: 400;
    i{
      color: #F2F6FC;
      margin-left: 5px;
      margin-right: 5px;
    }
    .anniu{
      height: 56px;
      float: right;
      display: flex;
      align-items: center;
    }
  }
  // .queryForm{
  //   text-align: center;
  // }
  .form-div{
    margin-left: 10px;
  }
/deep/.mod-detail{
  .dialogForm{
    .el-dialog{
      margin-top: 5vh !important;
    }
  }
}
/deep/.dialogForm{
  .el-form-item__label{
    width: 90px !important;
  }
  .form-s{
    .el-form-item__label{
    width: 110px !important;
   }
  }
  .upload-s{
    margin-left: 20px;
  }
  .el-form-item__content{
    margin-left: 90px !important;
  }
}
  .table-s{
    margin-top: 10px;
    padding-left: 10px;
    width: 100%;
  }
  .tab-pane{
    float: left;
  }
  .anniu-s{
    float: right;
    margin-right: 15px;
  }
</style>

